import { View, Text } from '@tarojs/components'
import './index.scss'
import { useState } from 'react'
import SwiperCard from './components/SwiperCard'

export default function UserContent() {
  const gn = [
    {
      icon: 'shopping-cart',
      label: '抖音商城',
    },
    {
      icon: 'sound',
      label: '我的音乐',
    },
    {
      icon: 'message',
      label: '我的群聊',
    },
    {
      icon: 'shopping-bag',
      label: '查看更多',
    },
  ]
  const nav = [
    {
      label: '作品',
    },
    {
      label: '私密',
    },
    {
      label: '喜欢',
    },
    {
      label: '收藏',
    },
  ]
  const [curIdx, setCurIdx] = useState(0)

  return (
    <>
      <View className="content">
        <View className="wraper">
          <View className="detaiil">
            <View className="d_left">
              <View className="d_left_item">
                <View>124</View>
                <View>获赞</View>
              </View>
              <View className="d_left_item">
                <View>3785</View>
                <View>朋友</View>
              </View>
              <View className="d_left_item">
                <View>1</View>
                <View>关注</View>
              </View>
              <View className="d_left_item">
                <View>89.8w</View>
                <View>粉丝</View>
              </View>
            </View>
            <View className="d_right">添加朋友</View>
          </View>
          <View className="desc">
            每晚12:00直播 韩舞业余，专业蹦迪！ 虎的小号@杨巅峰🐑🐯 💜商务V：Joymedia7 💜
            💙这辈子人潮汹涌 遇到你 我很幸运💙
          </View>
          <View className="ip">
            24岁 <Text>浙江-杭州</Text>
          </View>
          <View className="gn">
            {gn.map((item, index) => {
              return (
                <View key={index} className="gn_item">
                  <View className={`at-icon at-icon-${item.icon} icon`} />
                  {item.label}
                </View>
              )
            })}
          </View>
        </View>
        <View className="nav">
          <View className="flex">
            {nav.map((item, index) => {
              return (
                <View
                  style={{
                    opacity: index === curIdx ? '1' : '.7',
                  }}
                  onClick={() => setCurIdx(index)}
                  key={index}
                  className="n"
                >
                  {item.label}
                </View>
              )
            })}
          </View>
          <View
            style={{
              left: `${curIdx * 25}%`, // 使用 left 代替 transform
              transition: 'left 0.3s', // 添加过渡效果
            }}
            className="line"
          />
        </View>
        <SwiperCard curIdx={curIdx} setCurIdx={setCurIdx} />
      </View>
    </>
  )
}
